
/*Transition effects*/

.slide-fade-enter-active {
    transition: all .6s ease;
}

.slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-active {
    transform: translateX(30px);
    opacity: 0;
}

/*Fade in effects*/

.fade-in-enter-active {
    transition: all .6s ease;
}

.fade-in-leave-active {
    transition: all 0s;
}

.fade-in-enter,
.fade-in-leave-active {
    /*transform: translateX(30px);*/
    opacity: 0;
}

/*Slide in transition used on the graqleditor which resides within the navbar*/

.slide-in-right-fade-enter-active {
    transition: all .6s ease;
    transition-delay: .2s;
}

.slide-in-right-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-in-right-fade-enter,
.slide-in-right-fade-leave-active {
    transform: translateX(-100px);
    opacity: 0;
}

/*Slide in transition used on the side bar menu*/

.slide-fast-right-fade-enter-active {
    transition: all .3s ease;
}

.slide-fast-right-fade-leave-active {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fast-right-fade-enter,
.slide-fast-right-fade-leave-active {
    transform: translateX(-60px);
    /*opacity: 0;*/
}


/*
==============================================
stretchRight
==============================================
*/

.stretch-right-enter-active{
	animation-name: stretchRight;
	-webkit-animation-name: stretchRight;

	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;

	transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
	0% {
		transform: scaleX(0.3);
	}
	40% {
		transform: scaleX(1.02);
	}
	60% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(1);
	}
}

@-webkit-keyframes stretchRight {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1.02);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(1);
	}
}



/*Slide IN DOWN*/

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown-enter-active {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  animation-duration: .5s;
  -webkit-animation-duration: .5s;
  /*In order to use the delay we need to hide the element first*/
  /*animation-delay: .2s;*/
}


/*Slide IN UP*/

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp-enter-active {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  animation-duration: .5s;
  -webkit-animation-duration: .5s;
  /*In order to use the delay we need to hide the element first*/
  /*animation-delay: .2s;*/
}


/*Toggle side bar animation button*/

.c-hamburger--htx {
  background-color: #ff3264;
}

.c-hamburger--htx span {
  transition: background 0s 0.2s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.2s, 0.2s;
  transition-delay: 0.2s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #cb0032;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.2s;
}
